<template>
	<view class="mine">
		<view class="mine-top">
			<view class="userinfo">
				<img src="@/static/img/dwld.png" alt="" class="userinfo-avatar" />
				<view class="userinfo-main">
					<view class="userinfo-username" @click="toUserinfo">
						<span>张丹丹</span>
						<img src="@/static/img/edit.png" alt=""  class="userinfo-username-edit"/>
					</view>
					<view class="userinfo-userlevel">
						普通用户
					</view>
				</view>
				<view class="question">
					<img src="@/static/img/question.png" alt=""  class="userinfo-username-edit"/>
				</view>
			</view>
			<view class="member">
				<img src="@/static/img/member.png" alt="" />
			</view>
		</view>
		<view class="mine-list">
			<view class="mine-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
				<view class="mine-item-title">
					<img class="logo" :src="item.logo" alt="" />
					<view class="title"> {{item.title}} </view>
				</view>
				<view class="more">
					<img src="@/static/img/more.png" alt="" />
				</view>
			</view>
		</view>
		<view class="logout" @click="toWithdraw">
			<span  class="logout-btn">注销账号</span>
		</view>
		
		
		<u-popup :show="showLogout" mode="center" :round="16">
			<view class="custom-popup logout-popup">
				<view class="logo">
					<img src="@/static/img/logout-logo.png" alt="" />
				</view>
				<view class="title">
					退出确认
				</view>
				<view class="content">
					是否确认退出账号
				</view>
				<view class="opt">
					<u-button class="opt-btn cancel" type="primary" text="取消" @click="showLogout = false"></u-button>
					<u-button class="opt-btn confirm" type="primary" text="退出" @click="showLogout = false"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				applicationLocale:'',
				list:[
					{
						logo:require('@/static/img/password.png'),
						title:'修改密码',
						path:'/pages/mine/changePassword/changePassword',
					},
					{
						id:'logout',
						logo:require('@/static/img/logout.png'),
						title:'退出登录',
						path:'',
					},
				],
				showLogout: false
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'userInfo'])
		},
		onLoad() {
			
		},
		methods: {
			itemClick(item){
				if(item.path) {
					uni.navigateTo({ url:item.path })
				}else {
					if('logout'===item.id) {
						this.showLogout = true
					}
				}
			},
			toUserinfo(){
				uni.navigateTo({
					url:'/pages/mine/userinfo/userinfo'
				})
			},
			toWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw/withdraw'
				})
			}
		}
	}
</script>

<style scoped lang="less">
view {
	box-sizing: border-box;
}
.mine-top {
	background-image: url('../../static/img/userinfo-bg.png');
	background-size: 100%;
	padding: 0 32rpx;
	padding-top: 116rpx;
	height: 598rpx;
	.userinfo {
		display: flex;
		gap: 16rpx;
		height: 128rpx;
		position: relative;
		width: 100%;
		.userinfo-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
		}
		.userinfo-username {
			display: flex;
			align-items: center;
			font-size: 40rpx;
			color: #333333;
			gap: 14rpx;
			margin-top: 14rpx;
			line-height: 1;
			.userinfo-username-edit {
				width: 26rpx;
				height: 26rpx;
			}
		}
		.userinfo-userlevel {
			display: inline-block;
			margin-top: 20rpx;
			padding: 0 14rpx;
			height: 40rpx;
			background: #F3F7FF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #FFFFFF;
			font-size: 24rpx;
			color: #397FF8;
		}
		.question {
			position: absolute;
			top: 0;
			right: 0;
			width: 28rpx;
			height: 28rpx;
			img {
				width: 100%;
			}
		}
	}
	.member {
		width: 100%;
		margin-top: 28rpx;
		img {
			width: 100%;
		}
	}
}
.mine-list {
	padding: 20rpx 32rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0 0;
	margin-top: -150rpx;
	margin-bottom: 40rpx;
	.mine-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		justify-content: space-between;
		.mine-item-title {
			display: flex;
			align-items: center;
			line-height: 1;
			gap: 16rpx;
			.logo {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.more {
			display: flex;
			img {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}

.logout {
	position: fixed;
	bottom: 104rpx;
	display: flex;
	justify-content: center;
	width: 100%;
	.logout-btn {
		border: none;
		background: transparent;
		font-size: 32rpx;
		color: #999999;
		line-height: 92rpx;
	}
}
.custom-popup {
	width: 628rpx;
	min-height: 400rpx;
	background-image: url('../../static/img/dialog-bg.png');
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 24rpx 40rpx 66rpx 60rpx;
	.title {
		text-align: center;
		font-size: 44rpx;
		color: #333333;
	}
	.content {
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #666666;
		overflow-wrap: break-word;
	}
	.opt {
		display: flex;
		gap: 28rpx;
		margin-top: 34rpx;
		.opt-btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			font-size: 32rpx;
			border: none;
		}
		.cancel {
			background: #F3F3F3;
			color: #999999;
			
		}
		.confirm {
			background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
		}
		.wzdl {
			width: 416rpx;
			height: 72rpx;
			background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
		}
	}
}
.logout-popup {
	.logo {
		display: flex;
		justify-content: center;
		img {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.content {
		text-align: center;
	}
}
</style>